﻿<CC:AnimatedBasePage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
	xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" 
	xmlns:CC="clr-namespace:Clarity.Phone.Controls" 
	
	xmlns:local="clr-namespace:TradeMo" 
	
	xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions" 
	
	xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:il="clr-namespace:Microsoft.Expression.Interactivity.Layout;assembly=Microsoft.Expression.Interactions" 
	
	x:Class="TradeMo.MainView" 
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
	d:DataContext="{d:DesignData SampleData/MainPageViewSampleData.xaml}"
	
	SupportedOrientations="Portrait"  Orientation="Portrait"
	shell:SystemTray.IsVisible="False"
	
	>
	<CC:AnimatedBasePage.Resources>
		<Style x:Key="PanoramaItemStyle1" TargetType="controls:PanoramaItem">
			<Setter Property="CacheMode" Value="BitmapCache"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:PanoramaItem">
						<Grid Background="{TemplateBinding Background}" Margin="12,0,0,0">
							<Grid.RowDefinitions>
								<RowDefinition Height="auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<ContentControl x:Name="header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" FontSize="{StaticResource PhoneFontSizeExtraExtraLarge}" FontFamily="{StaticResource PhoneFontFamilySemiLight}" HorizontalAlignment="Left" Margin="10,-2,0,26" Foreground="#DEFFFFFF">
								<ContentControl.RenderTransform>
									<TranslateTransform x:Name="headerTransform"/>
								</ContentControl.RenderTransform>
							</ContentControl>
							<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
		<Storyboard x:Name="HighlightStoryboard">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="HomeButton" >
				<EasingDoubleKeyFrame KeyTime="0:0:0.3" Value="0.3"/>
				<EasingDoubleKeyFrame KeyTime="0:0:1.5" Value="1">
					<EasingDoubleKeyFrame.EasingFunction>
						<BounceEase EasingMode="EaseIn"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</CC:AnimatedBasePage.Resources>

	<Grid x:Name="LayoutRoot">
		<VisualStateManager.VisualStateGroups>
			<VisualStateGroup x:Name="MessageState">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0:0:0.3"/>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="HideMessage"/>
				<VisualState x:Name="ShowMessage">
					<Storyboard>
						<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
						<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
			<VisualStateGroup x:Name="EnabledGroup">
				<VisualStateGroup.Transitions>
					<VisualTransition GeneratedDuration="0:0:0.3">
						<VisualTransition.GeneratedEasingFunction>
							<QuarticEase EasingMode="EaseOut"/>
						</VisualTransition.GeneratedEasingFunction>
					</VisualTransition>
				</VisualStateGroup.Transitions>
				<VisualState x:Name="EnabledState"/>
				<VisualState x:Name="DisabledState">
					<Storyboard>
						<DoubleAnimation Duration="0" To="0.4" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="AnimationGrid" d:IsOptimized="True"/>
						<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationX)" Storyboard.TargetName="AnimationGrid" d:IsOptimized="True"/>
					</Storyboard>
				</VisualState>
			</VisualStateGroup>
		</VisualStateManager.VisualStateGroups>
		<VisualStateManager.CustomVisualStateManager>
			<ic:ExtendedVisualStateManager/>
		</VisualStateManager.CustomVisualStateManager>
		<Grid x:Name="AnimationGrid">
			<Grid.Projection>
				<PlaneProjection CenterOfRotationY="1"/>
			</Grid.Projection>
					<Grid.Background>
			<ImageBrush Stretch="None" ImageSource="Wallpaper.png"/>
		</Grid.Background>

		<controls:Panorama x:Name="panorama" Margin="0,70,0,0" ItemContainerStyle="{StaticResource PanoramaItemStyle1}">
			<controls:PanoramaItem x:Name="browsePanoramaItem" Header="browse">
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto"/>
						<RowDefinition/>
					</Grid.RowDefinitions>
					<Border Grid.Row="0" Style="{StaticResource TradeMoBorderStyle}" VerticalAlignment="Top" >
						<Grid Margin="0,6">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition/>
								<ColumnDefinition Width="Auto"/>
							</Grid.ColumnDefinitions>
							<Button x:Name="HomeButton" Style="{StaticResource NoBorderButtonStyle}" Click="HomeButton_Click" VerticalAlignment="Top">
								<Image Source="/Images/home.png" Stretch="Fill" Width="32" Height="32" />
							</Button>
							<ListBox x:Name="Breadcrumbs" Grid.Column="1"
									 ItemsSource="{Binding Breadcrumb}" SelectionChanged="Breadcrumbs_SelectionChanged" VerticalAlignment="Center" >
								<ListBox.ItemTemplate>
									<DataTemplate>
										<StackPanel Orientation="Horizontal">
											<TextBlock Text="{Binding Name}" Style="{StaticResource MoTextLargeStyle}"/> 
											<TextBlock Text=" &gt; " Style="{StaticResource MoTextBlockStyle}"/>
										</StackPanel>
									</DataTemplate>
								</ListBox.ItemTemplate>
								<ListBox.ItemsPanel>
									<ItemsPanelTemplate>
										<toolkit:WrapPanel/>
									</ItemsPanelTemplate>
								</ListBox.ItemsPanel>
							</ListBox>
							<Button x:Name="BrowseToButton" Grid.Column="2" Style="{StaticResource NoBorderButtonStyle}" 
									Click="BrowseToButton_Click" Visibility="{Binding SelectedCategory, Converter={StaticResource VisibilityConverter}}" 
									VerticalAlignment="Bottom"  >
								<Image Source="/Images/RightDark.png" Stretch="Fill" Width="24" Height="24" />
							</Button>

						</Grid>
					</Border>
						<Grid x:Name="grid" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center" MinHeight="150" MinWidth="300" Opacity="0.5">
							<Grid.Projection>
								<PlaneProjection RotationX="-90"/>
							</Grid.Projection>
							<Border BorderThickness="3" CornerRadius="8">
								<Border.BorderBrush>
									<SolidColorBrush Color="{StaticResource PhoneAccentColor}"/>
								</Border.BorderBrush>
								<Border.Background>
									<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" Opacity="0.75">
										<GradientStop Color="Black" Offset="0"/>
										<GradientStop Color="#FF292929" Offset="1"/>
									</LinearGradientBrush>
								</Border.Background>
								<TextBlock TextWrapping="Wrap" Text="{Binding Message}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{StaticResource PhoneTextTitle2Style}"/>
							</Border>
						</Grid>
						<ListBox x:Name="CategoryListBox" Grid.Row="1"
							ItemsSource="{Binding RootCategories}" 
							SelectionChanged="CategoryListBox_SelectionChanged">
							<ListBox.ItemTemplate>
								<DataTemplate>
									<Grid>
										<TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" Foreground="White" Margin="12,6"/>
									</Grid>
								</DataTemplate>
							</ListBox.ItemTemplate>
						</ListBox>
				</Grid>
			</controls:PanoramaItem>
			<controls:PanoramaItem x:Name="searchPanoramaItem" Header="search">
				<Grid>
					<Grid.RowDefinitions>
						<RowDefinition Height="Auto" />
						<RowDefinition Height="Auto" />
						<RowDefinition/>
					</Grid.RowDefinitions>
					<TextBox x:Name="SearchTextBox" Text="{Binding SearchText, Mode=TwoWay}" 
							TextWrapping="Wrap" KeyUp="TextBox_KeyUp" 
							InputScope="Search" Background="#7FFFFFFF" 
							Style="{StaticResource SearchTextBoxStyle}" Height="70" VerticalAlignment="Bottom" GotFocus="SearchTextBox_GotFocus" Margin="0,-10,0,0" >
						<TextBox.OpacityMask>
							<ImageBrush AlignmentX="Right" Stretch="None" ImageSource="/Images/SearchOpacityMask.png"/>
						</TextBox.OpacityMask>
					</TextBox>
					<Border Grid.Row="1" Style="{StaticResource TradeMoBorderStyle}" Margin="12,0" >
						<Grid>
							<Grid.ColumnDefinitions>
								<ColumnDefinition/>
								<ColumnDefinition Width="Auto" />
								<ColumnDefinition Width="Auto" />
							</Grid.ColumnDefinitions>
							<Button x:Name="searchTypeButton" Style="{StaticResource NoBorderButtonStyle}" HorizontalContentAlignment="Left" Click="searchTypeButton_Click">
								<TextBlock Text="{Binding SearchTypeName}"  
										Style="{StaticResource PhoneTextAccentStyle}" 
										VerticalAlignment="Center" />
							</Button>
							<Button x:Name="searchOptionsButton" Grid.Column="1" 
									Style="{StaticResource NoBorderButtonStyle}" Click="searchOptionsButton_Click"
									>
								<StackPanel Orientation="Horizontal">
									<Image Source="{Binding SearchTypeImage, Mode=OneWay}" />
									<Image Source="/Images/RightDark.png" Stretch="Fill" Width="24" Height="24" />
								</StackPanel>
							</Button>
						</Grid>
					</Border>
				</Grid>
			</controls:PanoramaItem>

			<controls:PanoramaItem x:Name="recentPanoramaItem" Header="recent">
				<ScrollViewer>
					<Grid >
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="*"/>
						</Grid.RowDefinitions>
				
						<Border Grid.Row="0" Style="{StaticResource TradeMoBorderStyle}" >
							<Grid Margin="6,0">
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition/>
								</Grid.RowDefinitions>
								<TextBlock Text="Recently Viewed" Style="{StaticResource PhoneTextAccentStyle}" Margin="12,-3,12,3" />
							</Grid>
						</Border>
						<ListBox x:Name="RecentlyViewListBox" Grid.Row="1" 
							ItemsSource="{Binding Recent.RecentlyViewed}" 
							SelectionChanged="RecentlyViewListBox_SelectionChanged" 
							ItemTemplate="{StaticResource ListingDataTemplate}" 
							ItemContainerStyle="{StaticResource SearchResultsListBoxItemStyle}" ScrollViewer.VerticalScrollBarVisibility="Disabled" 
										/>

						<Border Grid.Row="2" Style="{StaticResource TradeMoBorderStyle}" Margin="0,8,0,0" >
							<Grid Margin="6,0">
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition/>
								</Grid.RowDefinitions>
								<TextBlock Text="Recent Searches" Style="{StaticResource PhoneTextAccentStyle}" />
							</Grid>
						</Border>
						<ListBox x:Name="RecentSearchesListBox" Grid.Row="3" 
							ItemsSource="{Binding Recent.RecentSearches}" 
							ItemContainerStyle="{StaticResource SearchResultsListBoxItemStyle}" 
							SelectionChanged="RecentSearchesListBox_SelectionChanged" ScrollViewer.VerticalScrollBarVisibility="Disabled" >
							<ListBox.ItemTemplate>
								<DataTemplate>
									<Grid d:DesignWidth="480" Margin="0,3,0,0">
										<Grid.Background>
											<SolidColorBrush Color="Black" Opacity="0.5"/>
										</Grid.Background>
										<TextBlock Text="{Binding SearchString}" Style="{StaticResource MoTextLargeStyle}" Foreground="White"/>
									</Grid>
								</DataTemplate>
							</ListBox.ItemTemplate>
						</ListBox>

						<Button x:Name="ClearRecentButton" Grid.Row="4" Content="Clear Recent" HorizontalAlignment="Right" Click="ClearRecentButton_Click" VerticalAlignment="Bottom" Style="{StaticResource TradeMoButtonStyle}" />
					</Grid>
				</ScrollViewer>
			</controls:PanoramaItem>
			
			<controls:PanoramaItem x:Name="myTradeMePanoramaItem" Header="my trade me" >
				<Grid >
					<Grid Visibility="{Binding LoggedIn, ConverterParameter=Collapsed, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
						<Button x:Name="LoginButton" Grid.Column="1" d:LayoutOverrides="Height" Click="LoginButton_Click" HorizontalAlignment="Center" VerticalAlignment="Top" Style="{StaticResource TradeMoButtonStyle}">
							<StackPanel Orientation="Horizontal">
								<Image Source="{Binding LoginImage}" Stretch="Fill" Width="32" Height="32"/>
								<TextBlock Text="Login" Style="{StaticResource PhoneTextLargeStyle}" Foreground="#DEFFFFFF"/>
							</StackPanel>
						</Button>

					</Grid>
					<Grid Visibility="{Binding LoggedIn, Converter={StaticResource VisibilityConverter}, Mode=OneWay}">
						<Grid.RowDefinitions>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition Height="Auto"/>
							<RowDefinition />
						</Grid.RowDefinitions>
						
						<Border Grid.Row="0" Style="{StaticResource TradeMoBorderStyle}" VerticalAlignment="Top" >
							<Grid>
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="Auto"/>
								</Grid.RowDefinitions>
								<StackPanel Orientation="Horizontal" >
									<TextBlock Text="{Binding Summary.FirstName}" Style="{StaticResource PhoneTextAccentStyle}"/>
									<TextBlock Text="{Binding Summary.LastName}" Style="{StaticResource PhoneTextAccentStyle}"/>
								</StackPanel>
								<StackPanel Grid.Row="1" Orientation="Horizontal">
									<TextBlock Text="{Binding Summary.Nickname}" Foreground="Black" VerticalAlignment="Center" Margin="6,0,0,0"/>
									<TextBlock Text="{Binding UniquePositive}" Style="{StaticResource MoTextBlockStyle}"/>
									<Image Source="{Binding Summary.PositiveFeedback, Converter={StaticResource UniquePositiveConverter}}" Stretch="None"/>
									<Image Source="/Images/icon_av.png" Stretch="None" Visibility="{Binding Summary.IsAddressVerified, Converter={StaticResource VisibilityConverter}}" />
								</StackPanel>
							</Grid>
						</Border>
						
						<Border Grid.Row="1" Style="{StaticResource TradeMoBorderStyle}" >
							<Button x:Name="BuyingButton" Style="{StaticResource NoBorderButtonStyle}" 
									Click="BuyingButton_Click" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
								<Grid>
									<Grid.RowDefinitions>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
									</Grid.RowDefinitions>
								
									<TextBlock Text="Buying" Style="{StaticResource PhoneTextAccentStyle}"/>
									
									<Image Height="24" Source="/Images/RightDark.png" Stretch="Fill" Width="24" HorizontalAlignment="Right" />
									
									<TextBlock Grid.Row="1" Text="{Binding WatchList}" Style="{StaticResource MoTextBlockStyle}" />
									<TextBlock Grid.Row="2" Text="{Binding ItemsIWon}" Style="{StaticResource MoTextBlockStyle}" />
									<TextBlock Grid.Row="3" Text="{Binding ItemsILost}" Style="{StaticResource MoTextBlockStyle}" />
								</Grid>
							</Button>
						</Border>
						<Border Grid.Row="2" Style="{StaticResource TradeMoBorderStyle}" >
							<Button x:Name="SellingButton" Style="{StaticResource NoBorderButtonStyle}" 
									Click="SellingButton_Click" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
								<Grid>
									<Grid.RowDefinitions>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
										<RowDefinition Height="Auto"/>
									</Grid.RowDefinitions>
								
									<TextBlock Text="Selling" Style="{StaticResource PhoneTextAccentStyle}"/>
									
									<Image Height="24" Source="/Images/RightDark.png" Stretch="Fill" Width="24" HorizontalAlignment="Right"/>
									<TextBlock Grid.Row="1" Text="{Binding SellingCount}" Style="{StaticResource MoTextBlockStyle}" />
									<TextBlock Grid.Row="2" Text="{Binding SoldCount}" Style="{StaticResource MoTextBlockStyle}" />
									<TextBlock Grid.Row="3" Text="{Binding UnsoldCount}" Style="{StaticResource MoTextBlockStyle}" />

								</Grid>
							</Button>
						</Border>
						
						<Border Grid.Row="3" Style="{StaticResource TradeMoBorderStyle}" >
							<Grid>
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="Auto"/>
								</Grid.RowDefinitions>
							
								<TextBlock Text="Account" Style="{StaticResource PhoneTextAccentStyle}"/>
								<Grid Grid.Row="1">
									<TextBlock Text="Balance" Style="{StaticResource MoTextBlockStyle}" />
									<TextBlock Text="{Binding AccountBalance}" Style="{StaticResource MoTextBlockStyle}" HorizontalAlignment="Right" Margin="6,0" />
								</Grid>
							</Grid>

						</Border>
						
						<Button x:Name="RefreshSummaryButton" Grid.Row="4" Click="RefreshSummaryButton_Click" HorizontalAlignment="Right" VerticalAlignment="Bottom" Style="{StaticResource TradeMoButtonStyle}" >
							<Image Source="/icons/appbar.refresh.rest.png" Stretch="None" />
						</Button>

					</Grid>
				</Grid>
			</controls:PanoramaItem>
			
		</controls:Panorama>
			<ProgressBar Height="10" VerticalAlignment="Top" Margin="0,62,0,0" IsIndeterminate="{Binding IsSearching}" Style="{StaticResource TradeMoProgressBarStyle}"/>
		<Grid VerticalAlignment="Top" >
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<Grid Grid.Column="1" Margin="12">
				<Image Source="/icons/appbar.basecircle.rest.png" Stretch="None"/>
				<Button x:Name="AboutButton" Content="?" Style="{StaticResource NoBorderButtonStyle}" Click="AboutButton_Click" />
			</Grid>
		</Grid>
		</Grid>
	</Grid>

</CC:AnimatedBasePage>
	